<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="toList"
    ></topTitle>
    <div class="mainCon">
      <div class="mainConBox">
        <div class="secondaryTitle secondaryTitleTheme">班组基本信息</div>
        <div class="companyInfoBox">
          <el-row class="itemInfo">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组名称：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.groupName || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组长姓名：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.leader || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组总人数：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <el-link
                    type="primary"
                    @click="showDetail('')"
                    v-if="groupInfo.total > 0"
                    >{{ groupInfo.total }}人</el-link
                  >
                  <span v-if="groupInfo.total < 1"
                    >{{ groupInfo.total }}人</span
                  >
                </span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组长身份证号：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.leaderIDCard || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组在职人数：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <el-link
                    type="primary"
                    @click="showDetail('ON_JOB')"
                    v-if="groupInfo.employeeTotal > 0"
                    >{{ groupInfo.employeeTotal }}人</el-link
                  >
                  <span v-if="groupInfo.employeeTotal < 1"
                    >{{ groupInfo.employeeTotal }}人</span
                  >
                </span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组长手机号：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.tel || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组创建时间：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.createTime || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >班组主要工作：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.remark || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >所属参建单位：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.companyName || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >参建单位统一信用代码：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  groupInfo.uscc || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </div>
      <div class="spacing"></div>
      <div class="mainConBox">
        <div class="secondaryTitle secondaryTitleTheme">已关联打卡点</div>
        <!-- 班组关联打卡点列表 -->
        <el-table
          :data="punchCardRuleList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec; margin-top: 24px"
        >
          <el-table-column prop="name" label="规则名称" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.isDefault == '1'">默认打卡点</div>
              <div v-else>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="打卡地点" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.isDefault == '1'">
                无打卡地址 - <span style="color: #999">100米内</span>
              </div>
              <div v-else>
                {{ scope.row.address }} -
                <span style="color: #999">{{ scope.row.range }} 米内 </span>
              </div>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          :filterField="filterField"
          @getList="getTableList"
          :requestUrl="requestUrl"
          :current-page="currentPage"
          :page-size="pageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'constructGroupDetail',
  data() {
    return {
      back: true,
      titleText: '班组详情',
      groupInfo: '',
      id: '',
      projectName: '',
      projectId: '',
      userType: '', //用户类型
      punchCardRuleList: [],
      requestUrl: 'api-att/cs/point/expand/list',
      filterField: {
        projectId: '',
        groupId: '',
      },
      loading: true,
      isShow: false,
      currentPage: 1,
      pageSize: 10,
    }
  },
  created() {
    this.userType = localStorage.getItem('loginType')
    this.id = this.$route.query.id
    this.isFB = this.$route.query.isFB
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.filterField.projectId = this.projectId
    this.filterField.groupId = this.id
    //获取企业详情
    this.getGroupInfo()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getGroupInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/group/expand/finddetailbyid',
        data: {
          id: this.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.groupInfo = res.data.result
          } else {
            this.$message({
              showClose: true,
              message: '获取数据失败',
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: '获取数据失败',
            type: 'error',
          })
          //请求成功关闭；
          // this.closeFullScreen(this.openFullScreen());
        })
    },
    toList() {
      if (this.isFB) {
        var urls, oldUrls
        urls = '/home/employee/projectEmployeeFb'
        this.$router.push({
          path: urls,
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        var urls, oldUrls
        if (this.$route.query.type == 'jcDetail') {
          urls = '/home/monitorProjectManagement/projectDetail'
          if (this.userType === 'QY' || this.userType === 'XM') {
            //企业看板班组管理
            oldUrls = '/home/project/projectListQY'
          } else {
            oldUrls = '/home/project/projectList'
          }
        } else {
          urls = '/home/employee/projectEmployeeQY'
          oldUrls = '/home/employee/projectEmployeeQY'
        }
        this.$router.push({
          path: urls,
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: oldUrls,
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    showDetail(isOnTheJob, total) {
      if (this.$route.query.type == '') {
        this.$router.push({
          path: '/home/employee/projectEmployeeQY',
          name: 'projectEmployeeQY',
          query: {
            groupId: this.id,
            projectId: this.projectId,
            uscc: this.groupInfo.uscc,
            isOnTheJob: isOnTheJob,
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/monitorProjectManagement/projectDetail',
          name: 'projectDetail',
          query: {
            groupId: this.id,
            projectId: this.projectId,
            uscc: this.groupInfo.uscc,
            isOnTheJob: isOnTheJob,
            activeName: 'second',
          },
        })
        //this.$store.commit("CHANGE_SLIDER_NAME", {oldUrl:"/home/project/projectList",newUrl:this.$router.currentRoute.fullPath});
        if (this.userType === 'QY' || this.userType === 'XM') {
          //企业看板参建单位
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectListQY',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          //监察看板参建单位
          this.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/project/projectList',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    },
    getTableList(data) {
      this.punchCardRuleList = data
      this.loading = false
      if (this.punchCardRuleList.length < 1) {
        this.isShow = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    padding-top: 0;
    height: calc(100% - 67px);
    overflow-y: auto;
    &Box {
      padding: 20px 24px 30px;
    }
    .companyInfoBox {
      // padding: 12px 0;
      .itemInfo {
        // font-size: 14px;
        .el-col {
          // height: 38px;
          // line-height: 38px;
          // label{
          //     font-size: 14px;
          //     color: #666666;
          //     display: inline-block;
          //     text-align: right;
          //     float: left;
          //     width: 155px;
          // }
          // span{
          //     color: #151515;
          //     font-size: 14px;
          //     display: block;
          //     width: 98%;
          // }
          .el-link--inner span {
            color: #409eff;
          }
        }
      }
    }
  }
}
.gridContent {
  /deep/ .el-link {
    line-height: 1 !important;
  }
}
</style>
